﻿@page "/Numeric-TextBox/Default-Functionalities"

@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the Numeric TextBox. Type a value in the input element to change the value dynamically, or press up/down arrow button to increase/decrease the value with a predefined step value.</p>
</SampleDescription>
<ActionDescription>
   <p>The NumericTextBox provides an option to customize the display format of the numeric value using the format property. It accepts the standard numeric format string and custom numeric format string as specified in<a target='_blank'href='https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings'>MSDN</a>. The formatted value displays when the component is not focused.</p>
   <p>The NumericTextBox component is used to get the number inputs from the user. The input values can be increased or decreased with a predefined step value.</p>
   <p>In this demo, the default NumericTextBox is rendered with the percent and currency formats as specified in <a target='_blank'href='https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings'>MSDN</a>.</p>
   <p>More information about the NumericTextBox can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started/'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="control-label">
                Numeric TextBox
            </div>
            <SfNumericTextBox TValue="double?" Value=10></SfNumericTextBox>

            <div class="control-label">
                Percentage TextBox
            </div>
            <SfNumericTextBox TValue="double?" Format="p2" Value=0.5 Max=1 Min=0 Step=0.01></SfNumericTextBox>

            <div class="control-label">
                Currency TextBox
            </div>
            <SfNumericTextBox TValue="double?" Format="c2" Value=100></SfNumericTextBox>
        </div>
    </div>
</div>

<style>

    .content-wrapper {
        width: 35%;
        margin: 0 auto;
        min-width: 185px;
    }

    .e-float-input.e-numeric.e-input-group {
        margin-top: 40px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }
</style>
